<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }
        textarea {
            font-size: 20px;
            width: 10em;
            padding: 1em;
            transition: 0.3s;
        }
        textarea:focus {
            font-size: 40px;
            transition: 0.3s;
        }
        input {
            font-size: 1em;
        }
    </style>
</head>
<body>
    <p>      
        em的使用场景 <br>
        适用于局部某个组件样式，在组件缩放时能保持里面的元素比例不变<br>
        比如下面的场景，当文本框获取焦点时需要等比例放大文本框和文字的大小<br>
        虽然 rem 可以做到，但是它的前提条件是改变 html 的 font-size 大小，而这又会影响其他页面内容<br>
        这时 em 就是最好的选择了
        <code>
            textarea {
                font-size: 20px;
                width: 10em;
                padding: 1em;
                transition: 0.3s;
            }
            textarea:focus {
                font-size: 40px;
                transition: 0.3s;
            }
            input {
                font-size: 1em;
            }
        </code>
    </p>
    <textarea rows="5">
        hello world
    </textarea>
</body>
</html>